<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>查询课程</title>
		<link rel="stylesheet" type="text/css" href="css/userQuerySourse.css"/>
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
		<!--<link rel="stylesheet" type="text/css" href="css/QuerySourse.css"/>-->
	</head>
	<body>
		
		<div id="container">
			<div id="shipin">
				<ul>
					<li v-for="(sourse,index) in sourseData">
						<div id="del">
							<input type="button" name="delete" id="delete" value="删除" @click="del(index,sourse.sourseId)"/>
						</div>
						<div id="images">
							<a href="video.html">
								<img src="images/xuexi2.jpg" alt="" />
								<div id="name">{{sourse.sourseName}}</div>
							</a>
						</div>
						<div id="intro">
							<h4>课程简介:</h4>
							<p>{{sourse.sourseIntro}}</p>
						</div>
						<div id="other">
							
						</div>
					</li>
					
				</ul>
			</div>
			
			<!--<h2 class="page-header">我的课程</h2>
			<table id="dataTable" class="table table-striped">
				<thead>
					<tr>
						<th>课程</th>
						<th>简介</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div id="images" v-for="(sourse,index) in sourseData">
								<img src="images/xuexi2.jpg" alt="" />
								<div id="name">{{sourse.sourseName}}</div>
							</div>
						</td>
						<td>
							<div id="intro" v-for="(sourse,index) in sourseData">
								<h4>课程简介:</h4>
								<p>{{sourse.sourseIntro}}</p>
							</div>
						</td>
						<td>
							<input type="hidden" name="sourseId" id="sourseId" value={{sourse.sourseId}} />
							<divv v-for="(sourse,index) in sourseData">
								<input type="button" value="删除" class="btn btn-danger btn-sm" @click="del(index,user.userId)"/>
							</div>
							<input type="button" value="详情" class="btn btn-info btn-sm" @click="toUpdate(emp.empId,index)"/>
						</td>
					</tr>				
				</tbody>-->
			</table>
		</div>
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
		
		<script>
		
//			var author = localStorage.getItem('userLoginName');
			//vue实例
			var vue = new Vue({
				el:'#container',
				data:{
					sourseData:[]//员工数据
					
				},
				methods:{
					//查询数据方法
					query:function(){
						
						axios.get(baseUrl + '/sourse/author')
							.then(function(response){
								
								//响应的员工数据集合赋值给数据模型
								this.sourseData = response.data;
								
							}.bind(this))
							.catch(function(error){
								layer.msg('获得课程列表失败');
							});
						
					},
					del:function(index , sourseId){
						var flag = window.confirm('是否确定删除课程');
						if(!flag){
							return;
						}
						axios.get(baseUrl + '/sourse/delete',{
									params:{
										sourseId:sourseId
									}
								})
								.then(function(response){
									layer.msg('删除课程成功');
									//前端删除员工数据
									vue.sourseData.splice(index , 1);
									
								}.bind(this))
								.catch(function(error){
									layer.msg('删除课程失败');
								});
					},
//					toUpdate:function(empId,index){
//						
//						layer.open({
//							title:'员工详情',
//							type:2,
//							area:['700px','800px'],
//							content:'UpdateEmp.html?empId=' + empId + '&index=' + index
//						});
//						
//					}
				},
				mounted:function(){
					this.query();					
				}				
			});
			
		</script>
		
	</body>
</html>
